<template>
    <div class="chart">
        <div class="top">
            <div class="left">
                <div class="left-top">
                    <p style="font-size: 12px;">本月累计收益（万元）</p>
                    <p style="font-size: 24px; margin-top: 6px;">¥ 
                         <count-to :startVal="0" :endVal="data1.list.allAmount" :decimals="2" :duration="1000"></count-to>
                    </p>
                </div>
                <ul>
                    <li>
                        <div class="shou">
                            今日新增收益
                        </div>
                        <div class="price"><span style="font-size: 20px; color: #000;"> 
                        <count-to :startVal="0" :endVal="data1.list.tadayAdded " :decimals="2" :duration="1000"></count-to>
                            </span><span>万元</span>
                        </div>
                    </li>
                    <li>
                        <div class="shou" style="border-left: 6px solid #e6a23c;">
                            今日新增支出
                        </div>
                        <div class="price"><span style="font-size: 20px; color: #000;"> 
                        <count-to :startVal="0" :endVal="data1.list.tadaySub " :decimals="2" :duration="1000"></count-to>
                            </span><span>万元</span>
                        </div>
                    </li>
                    <li>
                        <div class="shou" style="border-left: 6px solid #67c23a;">
                            今日结余
                        </div>
                        <div class="price"><span style="font-size: 20px; color: #000;"> 
                        <count-to :startVal="0" :endVal="data1.list.tadayAmount " :decimals="2" :duration="1000"></count-to>
                            </span><span>万元</span>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="right">
                <Columnar></Columnar>
            </div>
        </div>

        <div class="header">
            <div class="left">
                <Zhengfu></Zhengfu>
            </div>
            <div class="right">
                <el-calendar v-model="value" @click="time" />
            </div>
        </div>
        <div class="body">
            <div class="left">
                <div class="a1">
                    <Bing></Bing>
                </div>
                <div class="a2"></div>
            </div>
            <div class="right">
                <div>
                    <HelloWorld></HelloWorld>
                </div>

            </div>
        </div>
        <div class="bottom">
            <div class="left">
                <Table></Table>
            </div>
            <div class="right">
                <div class="div" :class="{active:data1.active==item.id}" v-for="(item, index) in data1.regionslist" :key="index" @click="tablist(item)">
                    <p>{{ item.title }}</p>
                    <p class="p">
                    <div>今日回款</div>
                    <div>
                        <span :style="item.balance > 0 ? red : green">{{ item.balance }}</span><span>（万元）</span>
                    </div>
                    </p>
                    <p class="p">
                    <div>今日结余</div>
                    <div>
                        <span :style="item.balance > 0 ? red : green">{{ item.receivable }}</span><span>（万元）</span>
                    </div>
                    </p>
                </div>
            </div>
        </div>
        <div id="Words"></div>
    </div>
</template>


<script setup>
import { ref, reactive, toRefs, onMounted } from "vue"
import { trend, regions, charttime ,tablelist,binglist} from '@/http/api'
import HelloWorld from '@/components/HelloWorld.vue';
import Zhengfu from "@/components/zhengfu.vue";
import Bing from "../../components/bing.vue";   
import Columnar from "@/components/Columnar.vue";
import Table from "@/components/table.vue";
import { useStore } from "vuex";
import {CountTo} from 'vue3-count-to'
const store=useStore()
const data1 = reactive({
    list: {},
    regionslist: [],
    active:'1'
})
const value = ref()
const time = () => {
    gettrend(value.value)
}
const rouftable= async()=>{
    let res= await tablelist()
    store.commit('tablelist',res.data)
}
const gettrend = async (value) => {
    let res = await trend()
    let list = await regions()
    let { data } = await charttime(value)
    store.commit('charttime',data.result)
    data1.regionslist = list.data.regions
    data1.list = res.data
    store.commit('dailyCurve',res.data)
    console.log(789, data1.list);
}
const tablist= async(item)=>{
    data1.active=item.id
    await tablelist(item.id)
    console.log(data1.active);
}
const bing= async()=>{
   let res= await binglist()
   store.commit('bing', res.data)
//    console.log('bing',res);
}
onMounted(() => {
    gettrend()
    rouftable(),
    bing()
})
</script>


<style lang="scss" scoped>
.chart {
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;

    .top {
        width: 100%;
        height: 280px;
        display: flex;
        border-radius: 3px;
        box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);

        .left {
            width: 380px;
            padding: 20px;

            .left-top {
                color: #fff;
                height: 70px;
                background-image: linear-gradient(to right, #0ea5e9, #6366f1);
                padding: 10px 20px;
                box-sizing: border-box;
                border-radius: 5px;
            }

            ul {
                width: 100%;

                li {
                    width: 100%;
                    height: 57px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    border-bottom: 1px solid #c9c9c9;
                    padding: 16px 0;
                    box-sizing: border-box;
                    color: #666;
                    font-size: 12px;

                    div {
                        height: 24px;
                        line-height: 24px;
                    }

                    .shou {
                        border-left: 6px solid #409eff;
                        padding-left: 10px;
                    }

                    .price {
                        text-align: right;
                    }
                }
            }
        }

        .right {
            flex: 1;
        }
    }

    #Columnar {
        width: 100%;
        height: 100%;
    }

    div {
        width: 100%;
        box-shadow: 0 1 10px #ccc;
    }

    .header {
        height: 443px;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        margin-top: 20px;

        .left {
            flex: 1;
            box-shadow: 0 1px 10px #ccc;
            margin-right: 20px;
        }

        .right {
            width: 536px;
            box-shadow: 0 1px 10px #ccc;

            ::v-deep .el-calendar-table .el-calendar-day {
                width: 100%;
                height: 100%;

                .el-calendar-table thead th:before {
                    content: '星期';
                }
            }


        }
    }

    .body {
        width: 100%;
        height: 504px;
        display: flex;
        flex-wrap: wrap;
        position: relative;
        box-sizing: border-box;

        .left {
            width: 419px;
            height: 100%;
            // background: red;
            padding-top: 20px !important;
            padding: 10px;
            box-sizing: border-box;

            .a1 {
                width: 100%;
                height: 230px;
                box-sizing: border-box;
                box-shadow: 0 1px 10px #ccc;
                background: #fff;
            }

            .a2 {
                margin-top: 20px;
                width: 100%;
                height: 230px;
                box-sizing: border-box;
                box-shadow: 0 1px 10px #ccc;
                background: #fff;
            }
        }

        .right {
            flex: 1;
            padding: 20px;

            // background: #0ea5e9;
            div {
                padding: 20px;
                width: 100%;
                height: 100%;
                background: #fff;
                box-sizing: border-box;
                box-shadow: 0 1px 10px #ccc;

            }
        }
    }

    .bottom {
        height: 782px;
        width: 100%;
        display: flex;
        margin-top: 20px;

        .left {
            flex: 1;
            box-shadow: 0 1px 10px #ccc;
            margin-right: 20px;
        }

        .right {
            width: 419px;
            height: 100%;

            .div {
                padding: 15px;
                box-shadow: 0 1px 10px #ccc;
                height: 110px;
                width: 100%;
                box-sizing: border-box;
                border-radius: 5px;
                .p {
                    width: 100%;
                    font-size: 12px;
                    display: flex;
                    justify-content: space-between;
                    height: 20px;
                    margin-top: 10px;
                    color: #999;

                    div {
                        width: 100px;
                        margin: 0;
                    }
                }
            }
            

            div:not(:first-child) {
                margin-top: 24.2px;
            }
        }
    }
    .active{
         border-left: 6px solid #5172e9;
     }
}
</style>